<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>iPhone进销存管理系统报表</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body {
        font-family: 'Noto Sans SC', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f7;
        color: #1d1d1f;
    }

    .header {
        background-color: white;
        padding: 15px 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        margin-bottom: 30px;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    h1 {
        text-align: center;
        margin: 40px 0;
        color: #1d1d1f;
    }

    .chart-container {
        background-color: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .chart-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 30px;
    }

    .chart-box {
        flex: 1;
        min-width: 300px;
    }

    .chart-title {
        font-size: 18px;
        margin-bottom: 15px;
        font-weight: 600;
        color: #1d1d1f;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        background-color: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    th, td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    th {
        background-color: #f8f8f8;
        font-weight: 600;
    }

    tr:hover {
        background-color: #f8f8f8;
    }

    .highlight {
        color: #0071e3;
        font-weight: 600;
    }

    .danger {
        color: #ea4335;
        font-weight: 600;
    }

    .success {
        color: #34a853;
        font-weight: 600;
    }
  </style>
</head>
<body>
<header class="header">
  <div class="container">
    <div class="header-container">
      <h2>iPhone进销存管理系统报表</h2>
    </div>
  </div>
</header>

<div class="container">
  <div class="chart-row">
    <div class="chart-container chart-box">
      <div class="chart-title">各型号库存占比</div>
      <canvas id="pieChart"></canvas>
    </div>

    <div class="chart-container chart-box">
      <div class="chart-title">月度销售趋势</div>
      <canvas id="lineChart"></canvas>
    </div>
  </div>

  <div class="chart-row">
    <div class="chart-container chart-box">
      <div class="chart-title">供应商供货量对比</div>
      <canvas id="barChart"></canvas>
    </div>

    <div class="chart-container chart-box">
      <div class="chart-title">库存周转率分析</div>
      <canvas id="radarChart"></canvas>
    </div>
  </div>

  <div class="chart-container">
    <div class="chart-title">库存状态详情</div>
    <table>
      <thead>
      <tr>
        <th>产品型号</th>
        <th>当前库存</th>
        <th>安全库存</th>
        <th>最近采购量</th>
        <th>月销售量</th>
        <th>库存状态</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>iPhone 15 Pro Max (256GB)</td>
        <td>120</td>
        <td>50</td>
        <td>150</td>
        <td>180</td>
        <td class="danger">需补货</td>
      </tr>
      <tr>
        <td>iPhone 15 Pro (256GB)</td>
        <td>85</td>
        <td>60</td>
        <td>120</td>
        <td>150</td>
        <td class="danger">需补货</td>
      </tr>
      <tr>
        <td>iPhone 15 (128GB)</td>
        <td>210</td>
        <td>100</td>
        <td>200</td>
        <td>190</td>
        <td class="success">充足</td>
      </tr>
      <tr>
        <td>iPhone 14 (128GB)</td>
        <td>65</td>
        <td>40</td>
        <td>80</td>
        <td>70</td>
        <td class="success">充足</td>
      </tr>
      <tr>
        <td>iPhone SE (64GB)</td>
        <td>45</td>
        <td>30</td>
        <td>50</td>
        <td>40</td>
        <td class="success">充足</td>
      </tr>
      </tbody>
    </table>
  </div>

  <div class="chart-container">
    <div class="chart-title">供应商绩效评估</div>
    <table>
      <thead>
      <tr>
        <th>供应商名称</th>
        <th>供货及时率</th>
        <th>产品质量</th>
        <th>价格优势</th>
        <th>综合评分</th>
        <th>合作状态</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>苹果官方直供</td>
        <td>98%</td>
        <td>100%</td>
        <td>90%</td>
        <td class="highlight">96</td>
        <td class="success">优先合作</td>
      </tr>
      <tr>
        <td>富士康供应链</td>
        <td>95%</td>
        <td>98%</td>
        <td>92%</td>
        <td class="highlight">95</td>
        <td class="success">优先合作</td>
      </tr>
      <tr>
        <td>和硕联合科技</td>
        <td>90%</td>
        <td>95%</td>
        <td>88%</td>
        <td class="highlight">91</td>
        <td class="success">保持合作</td>
      </tr>
      <tr>
        <td>纬创资通</td>
        <td>85%</td>
        <td>92%</td>
        <td>85%</td>
        <td class="highlight">87</td>
        <td class="success">保持合作</td>
      </tr>
      <tr>
        <td>其他供应商</td>
        <td>78%</td>
        <td>85%</td>
        <td>80%</td>
        <td class="highlight">81</td>
        <td>观察中</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
  // 饼图 - 各型号库存占比
  const pieCtx = document.getElementById('pieChart').getContext('2d');
  const pieChart = new Chart(pieCtx, {
      type: 'pie',
      data: {
          labels: ['15 Pro Max', '15 Pro', '15', '14', 'SE'],
          datasets: [{
              data: [18, 15, 32, 20, 15],
              backgroundColor: [
                  '#0071e3',
                  '#34a853',
                  '#fbbc05',
                  '#ea4335',
                  '#8a8d91'
              ],
              borderWidth: 0
          }]
      },
      options: {
          responsive: true,
          plugins: {
              legend: {
                  position: 'right',
              },
              tooltip: {
                  callbacks: {
                      label: function(context) {
                          return `${context.label}: ${context.raw}%`;
                      }
                  }
              }
          }
      }
  });

  // 折线图 - 月度销售趋势
  const lineCtx = document.getElementById('lineChart').getContext('2d');
  const lineChart = new Chart(lineCtx, {
      type: 'line',
      data: {
          labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
          datasets: [
              {
                  label: 'iPhone 15系列',
                  data: [320, 280, 350, 380, 420, 450],
                  borderColor: '#0071e3',
                  backgroundColor: 'transparent',
                  borderWidth: 3,
                  tension: 0.3
              },
              {
                  label: 'iPhone 14系列',
                  data: [180, 150, 160, 140, 130, 120],
                  borderColor: '#8a8d91',
                  backgroundColor: 'transparent',
                  borderWidth: 2,
                  tension: 0.3
              },
              {
                  label: 'iPhone SE',
                  data: [50, 45, 60, 55, 50, 48],
                  borderColor: '#34a853',
                  backgroundColor: 'transparent',
                  borderWidth: 2,
                  tension: 0.3
              }
          ]
      },
      options: {
          responsive: true,
          scales: {
              y: {
                  beginAtZero: true,
                  title: {
                      display: true,
                      text: '销量(台)'
                  }
              }
          }
      }
  });

  // 柱状图 - 供应商供货量对比
  const barCtx = document.getElementById('barChart').getContext('2d');
  const barChart = new Chart(barCtx, {
      type: 'bar',
      data: {
          labels: ['苹果官方', '富士康', '和硕', '纬创', '其他'],
          datasets: [{
              label: '季度供货量(台)',
              data: [1200, 950, 750, 600, 300],
              backgroundColor: [
                  'rgba(0, 113, 227, 0.7)',
                  'rgba(52, 168, 83, 0.7)',
                  'rgba(251, 188, 5, 0.7)',
                  'rgba(234, 67, 53, 0.7)',
                  'rgba(138, 141, 145, 0.7)'
              ],
              borderColor: [
                  'rgba(0, 113, 227, 1)',
                  'rgba(52, 168, 83, 1)',
                  'rgba(251, 188, 5, 1)',
                  'rgba(234, 67, 53, 1)',
                  'rgba(138, 141, 145, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          responsive: true,
          scales: {
              y: {
                  beginAtZero: true,
                  title: {
                      display: true,
                      text: '供货量(台)'
                  }
              }
          }
      }
  });

  // 雷达图 - 库存周转率分析
  const radarCtx = document.getElementById('radarChart').getContext('2d');
  const radarChart = new Chart(radarCtx, {
      type: 'radar',
      data: {
          labels: ['15 Pro Max', '15 Pro', '15', '14', 'SE'],
          datasets: [
              {
                  label: '库存周转率',
                  data: [85, 82, 78, 90, 92],
                  backgroundColor: 'rgba(0, 113, 227, 0.2)',
                  borderColor: 'rgba(0, 113, 227, 1)',
                  borderWidth: 2,
                  pointBackgroundColor: 'rgba(0, 113, 227, 1)'
              },
              {
                  label: '行业标准',
                  data: [80, 80, 80, 80, 80],
                  backgroundColor: 'rgba(138, 141, 145, 0.2)',
                  borderColor: 'rgba(138, 141, 145, 1)',
                  borderWidth: 2,
                  borderDash: [5, 5],
                  pointBackgroundColor: 'rgba(138, 141, 145, 1)'
              }
          ]
      },
      options: {
          responsive: true,
          scales: {
              r: {
                  angleLines: {
                      display: true
                  },
                  suggestedMin: 50,
                  suggestedMax: 100
              }
          }
      }
  });
</script>
</body>
</html>